<template>
  <div class="star-wrap">
    <span class="star" v-for="(item, index) in total" :key="index" :class="{active: star >= (index + 1)}" @click="onSelectStarHandler(index + 1)"></span>
  </div>
</template>

<script>
export default {
  props: {
    star: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 5
    }
  },

  methods: {
    /**
     * 选择了星星
     * @param { Number } level 当前选择的星星级别
     */
    onSelectStarHandler (level) {
      this.$emit('onSelect', level)
    }
  }
}
</script>

<style lang="less">
.star-wrap {
  .star {
    background-image: url();
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    &.active {
      background-position-y: 13px;
    }
    &:last-child {
      margin-right: 0px;
    }
  }
}
</style>
